<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <el-header class="navbar">
      <div class="logo">AI创意工具箱</div>
      <el-menu :default-active="activeIndex" class="menu" mode="horizontal">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">功能中心</el-menu-item>
        <el-menu-item index="3" @click="goToUseGuide">使用指南</el-menu-item>
        <el-menu-item index="4">关于我们</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 英雄区（核心主题展示） -->
    <section class="hero">
      <div class="hero-content">
        <h1>AI创意工具箱<br>自媒体内容创作助手</h1>
        <p>一站式解决文案、语音、视频、图片等创作需求，让内容生产更高效、更有创意</p>
        <el-button type="primary" size="large" class="cta-button" @click="scrollToFeatures">立即开始创作</el-button>
      </div>
      <div class="hero-visual">
        <img
          src="https://picsum.photos/seed/ai_creative/600/400"
          alt="AI创意可视化"
          class="hero-img"
        />
      </div>
    </section>

    <!-- 核心功能区 -->
    <section class="features" id="features-section">
      <h2 class="section-title">核心功能</h2>
      <p class="section-subtitle">满足自媒体创作全流程需求，从文案到多媒体内容一键生成</p>
      <div class="features-grid">
        <!-- 文案生成 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-edit-outline"></i>
          </div>
          <h3>文案生成</h3>
          <p>智能生成标题、正文、广告文案等，支持自定义风格与关键词</p>
          <router-link to="/text-generation" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 语音生成 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-microphone"></i>
          </div>
          <h3>语音生成</h3>
          <p>文本转自然语音，支持多音色、语速调节，适用于音频解说场景</p>
          <router-link to="/voice-generation" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 文本摘要 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-document-copy"></i>
          </div>
          <h3>文本摘要</h3>
          <p>快速提取长文本核心信息，生成简洁摘要，节省内容整理时间</p>
          <router-link to="/text-summary" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 翻译 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-translation"></i>
          </div>
          <h3>音乐生成</h3>
          <p>根据文字描述生成音频，支持多语言、多音色，适用于语音解说、广告等场景</p>
          <router-link to="/music-generation" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 情感分析 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-emoji-happy"></i>
          </div>
          <h3>情感分析</h3>
          <p>分析文本情感倾向，优化内容表达，提升受众互动率</p>
          <router-link to="/emotion-analysis" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 视频创作（moviepy） -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-film"></i>
          </div>
          <h3>视频创作</h3>
          <p>视频分割、拼接、文本转视频、添加转场，快速制作自媒体视频</p>
          <router-link to="/video-editing" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 文字识别 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-reading"></i>
          </div>
          <h3>文字识别</h3>
          <p>识别图片文字，支持多语言、复杂排版，方便内容二次创作</p>
          <router-link to="/ocr" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 文字生成图片 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-picture"></i>
          </div>
          <h3>文字生成图片</h3>
          <p>根据文字描述生成创意图片，支持风格自定义，获取视觉素材</p>
          <router-link to="/text-to-image" class="feature-link">立即使用 →</router-link>
        </el-card>

        <!-- 去水印 -->
        <el-card class="feature-card" hover>
          <div class="feature-icon">
            <i class="el-icon-delete"></i>
          </div>
          <h3>去水印</h3>
          <p>去除图片、视频水印，还原素材原貌，方便二次创作</p>
          <router-link to="/remove-watermark" class="feature-link">立即使用 →</router-link>
        </el-card>
      </div>
    </section>

    <!-- 产品优势区 -->
    <section class="advantages">
      <h2 class="section-title">为什么选择AI创意工具箱？</h2>
      <div class="advantages-grid">
        <div class="advantage-item">
          <div class="advantage-icon">
            <i class="el-icon-bolt"></i>
          </div>
          <h3>高效创作</h3>
          <p>AI驱动快速生成内容，大幅减少创作时间，专注创意本身</p>
        </div>
        <div class="advantage-item">
          <div class="advantage-icon">
            <i class="el-icon-brush"></i>
          </div>
          <h3>创意无限</h3>
          <p>先进AI模型提供多样化方案，突破创作瓶颈，灵感不断</p>
        </div>
        <div class="advantage-item">
          <div class="advantage-icon">
            <i class="el-icon-service"></i>
          </div>
          <h3>全流程支持</h3>
          <p>覆盖文案、语音、视频、图片等全流程，一站式解决需求</p>
        </div>
        <div class="advantage-item">
          <div class="advantage-icon">
            <i class="el-icon-user"></i>
          </div>
          <h3>简单易用</h3>
          <p>界面友好、操作简单，无需专业技能，创作者轻松上手</p>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="footer-content">
        <p>© 2025 AI创意工具箱-自媒体内容创作助手. 保留所有权利.</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeIndex = ref('1');

// 滚动到核心功能区域的方法
const scrollToFeatures = () => {
  // 获取功能区元素
  const featuresSection = document.getElementById('features-section');
  
  if (featuresSection) {
    // 平滑滚动到功能区，距离顶部留出一些空间
    featuresSection.scrollIntoView({ 
      behavior: 'smooth', // 平滑滚动
      block: 'start' // 对齐方式
    });
  }
};

// 跳转到使用指南页面
const goToUseGuide = () => {
  router.push('/use-guide');
};
</script>
<style scoped>
@import '../assets/HomePage.css'
</style>
